<template>
	<view>
		<view class="fixedHeader">
			<uni-search-bar placeholder="搜索商品" @confirm="search()"></uni-search-bar>
		</view>

		<view class="homepage">

			<view class="bookCategories">
				<view>
					<view v-for="(item, index) in goodsCategories" v-if="goodsCategoriesCollapsed ? index < 4 : true"
						:key="item.id" @click="gotoUrl(`/pages/shop/search?categoryId=${item.id}`)">
						<image mode="aspectFill" :src="goodsCategoryImgs[index]"></image>
						<text>{{ item.categoryName }}</text>
					</view>
				</view>

				<view>
					<view v-if="goodsCategoriesCollapsed" @click="goodsCategoriesCollapsed = false">
						<text>显示全部</text>
						<uni-icons type="down" size="14px" color="#666"></uni-icons>
					</view>

					<view v-if="!goodsCategoriesCollapsed" @click="goodsCategoriesCollapsed = true">
						<text>收起</text>
						<uni-icons type="up" size="14px" color="#666"></uni-icons>
					</view>
				</view>
			</view>

			<view class="bookZones">
				<view style="background: linear-gradient(120deg, #ffe78b, #f4c607);"
					@click="gotoUrl(`/pages/shop/search?productZone=0`)">
					<uni-icons type="shop" size="14vw" color="white"></uni-icons>
					<view>
						<text>普通区</text>
						<uni-icons type="right" size="4.5vw" color="white"></uni-icons>
					</view>
				</view>

				<view style="background: linear-gradient(120deg, #64ffac, #11e26f);"
					@click="gotoUrl(`/pages/shop/search?productZone=1`)">
					<uni-icons type="star" size="14vw" color="white"></uni-icons>
					<view>
						<text>积分专区</text>
						<uni-icons type="right" size="4.5vw" color="white"></uni-icons>
					</view>
				</view>

				<view style="background: linear-gradient(120deg, #ffaea0, #ff401d);"
					@click="gotoUrl(`/pages/shop/search?productZone=2`)">
					<uni-icons type="vip" size="14vw" color="white"></uni-icons>
					<view>
						<text>会员专区</text>
						<uni-icons type="right" size="4.5vw" color="white"></uni-icons>
					</view>
				</view>
			</view>

			<goodsItems></goodsItems>

		</view>

	</view>
</template>

<script>
	import {
		gotoUrl
	} from "@/utils.js"

	import {
		getGoods,
		getGoodsCategories,
	} from "@/config/api.js"

	import goodsItems from './items.vue'

	export default {
		components: {
			goodsItems
		},
		data() {
			return {
				goodsCategories: [{
					"categoryName": "商品分类1",
					"id": 0
				}, {
					"categoryName": "商品分类2",
					"id": 1
				}, {
					"categoryName": "商品分类3",
					"id": 2
				}, {
					"categoryName": "商品分类4",
					"id": 3
				}, {
					"categoryName": "商品分类5",
					"id": 4
				}, {
					"categoryName": "商品分类6",
					"id": 5
				}, ],
				goodsCategories: [],
				goodsCategoryImgs: {
					0: ''
				},
				goodsCategoriesCollapsed: true,

				gotoUrl,
			}
		},
		mounted() {
			(async () => {
				var res = await getGoodsCategories()
				this.goodsCategories = res

				var tempObj = {}
				for (let i in this.goodsCategories) {
					var res = await getGoods({
						categoryId: this.goodsCategories[i].id
					})
					tempObj[i] = res[0].productImg
				}
				console.log('fetch result:', tempObj)
				this.goodsCategoryImgs = tempObj
			})()
		},
		methods: {
			search(e) {
				gotoUrl(`/pages/shop/search?keyword=${e.value}`)
			},
		}
	}
</script>

<style scoped>
	.fixedHeader {
		position: sticky;
		top: 0;
		right: 0;
		left: 0;
		z-index: 100;
		background-color: white;
	}

	.bookCategories>view:first-child {
		display: flex;
		flex-wrap: wrap;
		padding: 0 12px;
	}

	.bookCategories>view:first-child>view {
		position: relative;
		box-sizing: border-box;
		width: 46%;
		height: 22vw;
		margin: 2%;
		background: linear-gradient(120deg, #a4ffff, #36ddff);
		border-radius: 12px;
	}

	.bookCategories>view:first-child>view>image {
		position: absolute;
		top: 50%;
		left: 10%;
		transform: translateY(-50%);
		width: 15vw;
		height: 15vw;
		border-radius: 10px;
	}

	.bookCategories>view:first-child>view>text {
		position: absolute;
		top: 50%;
		right: 10%;
		transform: translateY(-50%);
		width: 17vw;
		color: white;
		font-size: 6vw;
		font-weight: bold;
		text-align: right;
		line-height: 1.15;
	}

	.bookCategories>view:last-child>view {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #666;
		font-size: 14px;
		padding: 8px;
		gap: 4px;
	}

	.bookZones {
		display: flex;
		gap: 2vw;
		margin: 16px 20px;
	}

	.bookZones>view {
		display: flex;
		flex: 1;
		flex-flow: column;
		align-items: center;
		justify-content: center;
		border-radius: 16px;
		height: 30vw;
	}

	.bookZones>view>uni-icons {
		padding-bottom: 1vw;
	}

	.bookZones>view>view {
		display: flex;
		align-items: center;
	}

	.bookZones>view>view>text {
		font-size: 4.5vw;
		font-weight: bold;
		color: white;
		padding: 0 0 1vw 1vw;
	}
</style>